

import {
  optionLine,
  optionBar,
  optionPie,
  optionGauge,
  optionTable,
  optionSum,
  optionScrollTable
} from "../../../chart/allCharts.js";

import {
  renderUIitem,
  echartOptions2UIItem,
  filter,
} from "./createChartOptionPanel.js";
import Vue from "vue";

const linerenderUIData = echartOptions2UIItem(
  optionLine,
  "optionLine",
  filter("optionLine")
);

const LinePanel = Vue.extend({
  data: function () {
    return {
      // 数据绑定，注意数据名
      optionLine: optionLine,
    };
  },
  watch: {
    optionLine: {
      handler: function (val) {
        this.$store.commit("setOptionLine", val);
      },
      deep: true,
    },
  },
  mounted() {},
  // 模板字符串 - 生成的一大堆字符串
  template: linerenderUIData.map(renderUIitem).join("\n"),
});

const barrenderUIData = echartOptions2UIItem(
  optionBar,
  "optionBar",
  filter("optionBar")
);

const BarPanel = Vue.extend({
  data: function () {
    return {
      // 数据绑定，注意数据名
      optionBar: optionBar,
    };
  },
  watch: {
    optionBar: {
      handler: function (val) {
        this.$store.commit("setOptionBar", val);
      },
      deep: true,
    },
  },
  mounted() {},
  // 模板字符串 - 生成的一大堆字符串
  template: barrenderUIData.map(renderUIitem).join("\\n"),
});

const pierenderUIData = echartOptions2UIItem(
  optionPie,
  "optionPie",
  filter("optionPie")
);

const PiePanel = Vue.extend({
  data: function () {
    return {
      // 数据绑定，注意数据名
      optionPie: optionPie,
    };
  },
  mounted() {},
  watch: {
    optionPie: {
      handler: function (val) {
        this.$store.commit("setOptionPie", val);
      },
      deep: true,
    },
  },
  // 模板字符串 - 生成的一大堆字符串
  template: pierenderUIData.map(renderUIitem).join("\\n"),
});

const gaugerenderUIData = echartOptions2UIItem(
  optionGauge,
  "optionGauge",
  filter("optionGauge")
);

const GaugePanel = Vue.extend({
  data: function () {
    return {
      optionGauge: optionGauge,
    };
  },
  mounted() {},
  watch: {
    optionGauge: {
      handler: function (val) {
        this.$store.commit("setOptionGauge", val);
      },
      deep: true,
    },
  },
  template: gaugerenderUIData.map(renderUIitem).join("\\n"),
});

const tablerenderUIData = echartOptions2UIItem(
  optionTable,
  "optionTable",
  filter("optionTable")
);

const TablePanel = Vue.extend({
  data: function () {
    return {
      optionTable: optionTable,
    };
  },
  mounted() {},
  watch: {
    optionTable: {
      handler: function (val) {
        this.$store.commit("setOptionTable", val);
      },
      deep: true,
    },
  },
  template: tablerenderUIData.map(renderUIitem).join("\\n"),
});

const scrollTablerenderUIData = echartOptions2UIItem(
  optionScrollTable,
  "optionScrollTable",
  filter("optionScrollTable")
);
const ScrollTablePanel = Vue.extend({
  data: function () {
    return {
      optionScrollTable: optionScrollTable,
    };
  },
  mounted() {},
  watch: {
    optionScrollTable: {
      handler: function (val) {
        this.$store.commit("setOptionScrollTable", val);
      },
      deep: true,
    },
  },
  template: scrollTablerenderUIData.map(renderUIitem).join("\\n"),
});

const sumrenderUIData = echartOptions2UIItem(
  optionSum,
  "optionSum",
  filter("optionSum")
);

const SumPanel = Vue.extend({
  data: function () {
    return {
      optionSum: optionSum,
    };
  },
  mounted() {},
  watch: {
    optionSum: {
      handler: function (val) {
        this.$store.commit("setOptionSum", val);
      },
      deep: true,
    },
  },
  template: sumrenderUIData.map(renderUIitem).join("\\n"),
});

// 注册全局组件
Vue.component('table-panel', TablePanel);
Vue.component('line-panel', LinePanel);
Vue.component('bar-panel', BarPanel);
Vue.component('pie-panel', PiePanel);
Vue.component('gauge-panel', GaugePanel);
Vue.component('sum-panel', SumPanel);
Vue.component('scroll-table-panel', ScrollTablePanel);
